<!-- eslint-disable vue/html-indent -->
<template>
  <div class="resources_detail">
    <div class="title">
      <p class="tip">{{ changeList?.changeSingleName }}-详情</p>
      <button class="btn" @click="goBack">返回</button>
    </div>
    <div class="details">
      <div class="information">
        <p class="titBox">基本信息</p>
        <div class="essential bottom">
          <div class="faultDecriptSummary">
            {{ changeList?.changeSingleName ? changeList?.changeSingleName : '--' }}
          </div>
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="变更单号">
              {{ changeList?.changeCode ? changeList?.changeCode : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="申请时间">
              {{ changeList?.createtime ? changeList?.createtime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="申请人">
              {{ changeList?.applicantName ? changeList?.applicantName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="创建机构">
              {{ changeList?.createrOrgName ? changeList?.createrOrgName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="变更类型">
              <!-- {{
                changeList?.changeType == 0
                  ? '常规变更'
                  : changeList?.changeType == 1
                  ? '重大变更'
                  : changeList?.changeType == 2
                  ? '简单变更'
                  : '--'
              }} -->
              {{changeList?.changeType}}
            </el-descriptions-item>
            <el-descriptions-item label="变更风险等级">
              {{
                changeList?.importantLev == 0
                  ? '底'
                  : changeList?.importantLev == 1
                  ? '中'
                  : changeList?.importantLev == 2
                  ? '高'
                  : '--'
              }}
            </el-descriptions-item>
            <el-descriptions-item label="变更标题" span="2">
              {{ changeList?.changeSingleName ? changeList?.changeSingleName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="变更原因" span="2">
              <!-- <quill-editor
                v-model="desc"
                @focus="onEditorFocus($event)"
                theme="snow"
              ></quill-editor> -->
              <!-- {{changeList.changeCauseText}} -->
              <!-- {{changeList?.changeCode ? true : false}}
              {{changeList.changeCauseText}} -->
              <TinymceEditor
                v-model="changeList.changeCauseText"
                v-if="changeList?.changeCode ? true : false"
                id="changeCauseText2"
              />
              <!-- :disabled="true"  content-type="html" enable :content="desc" -->
              <!--     :options="editorOption" -->
              <!-- {{ changeList.changeCauseText  v-model="changeList.changeCauseText"
                @focus="onEditorFocus($event)" }} -->
            </el-descriptions-item>
            <el-descriptions-item label="变更内容" span="2">
              <!--  <quill-editor
                v-model="changeList.changeDetails"
                @focus="onEditorFocus($event)"
              ></quill-editor> -->
              <TinymceEditor
                v-model="changeList.changeDetails"
                v-if="changeList?.changeCode ? true : false"
                id="changeDetails2"
              />
              <!-- {{ changeList.changeDetails }} -->
            </el-descriptions-item>
            <el-descriptions-item label="变更实施方案" span="2">
              <!-- <quill-editor
                v-model="changeList.changeProgram"
                @focus="onEditorFocus($event)"
              ></quill-editor> -->
              <TinymceEditor
                v-model="changeList.changeProgram"
                v-if="changeList?.changeCode ? true : false"
                id="changeProgram2"
              />
              <!-- {{ changeList.changeProgram }} -->
            </el-descriptions-item>
            <el-descriptions-item label="是否自动化">
              {{ changeList?.ifAuto == '1' ? '是' : changeList?.ifAuto == '0' ? '否' : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="是否手动启动">
              {{ changeList.ifMastart == '1' ? '是' : changeList?.ifMastart == '0' ? '否' : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="不能自动化原因">
              {{ changeList?.notAutoExecution ? changeList?.notAutoExecution : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="不能自动化执行原因说明">
              {{ changeList?.notExecutionText ? changeList?.notExecutionText : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="变更分类">
              {{ changeList?.changeCategoryName ? changeList?.changeCategoryName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所涉系统">
              {{ changeList?.sysname ? changeList?.sysname : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="计划开始时间">
              {{ changeList?.expectStartTime ? changeList?.expectStartTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="计划结束时间">
              {{ changeList?.expectEndTime ? changeList?.expectEndTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="是否紧急变更">
              {{ changeList?.isJjbg == '1' ? '是' : changeList?.isJjbg == '0' ? '否' : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="紧急变更原因">
              {{ changeList?.urgentChangeReason ? changeList?.urgentChangeReason : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="紧急原因说明">
              {{ changeList?.urgentReasonText ? changeList?.urgentReasonText : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="变更来源">
              {{
                changeList.changeResource == '1'
                  ? '数据中心'
                  : changeList.changeResource == '2'
                  ? '总行信息科技部'
                  : changeList.changeResource == '3'
                  ? '软件研发中心'
                  : changeList.changeResource == '4'
                  ? '集团信息技术局'
                  : changeList.changeResource == '5'
                  ? '省分行'
                  : changeList.changeResource == '6'
                  ? '省信息技术局'
                  : changeList.changeResource == '7'
                  ? '外部单位'
                  : '--'
              }}
            </el-descriptions-item>
            <el-descriptions-item label="变更所处阶段">
              {{ changeList.changeStage ? changeList.changeStage : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="是否影响业务连续性">
              {{ changeList.isStop == '1' ? '是' : changeList.isStop == '0' ? '否' : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="停止时长（分钟）">
              {{ changeList.closuerOften ? changeList.closuerOften : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="是否通过技术委员会">
              {{ changeList.ifOasis == '1' ? '是' : changeList.ifOasis == '0' ? '否' : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="是否通知业务">
              {{ changeList.isNotice == '1' ? '是' : changeList.isNotice == '0' ? '否' : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="变更原因">
              {{ changeList.changeReason ? changeList.changeReason : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="补录工单">
              {{ changeList.ifAddWork == '1' ? '是' : changeList.ifAddWork == '0' ? '否' : '--' }}
            </el-descriptions-item>

            <el-descriptions-item label="实施人">
              {{ changeList.implementorName ? changeList.implementorName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="实施结果">
              {{ changeList.performResult ? changeList.performResult : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="实施开始时间">
              {{ changeList.practicleStart ? changeList.practicleStart : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="实施结束时间">
              {{ changeList.practicleEnd ? changeList.practicleEnd : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="实施结束说明">
              {{ changeList.notesText ? changeList.notesText : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="变更机构">
              {{ changeList.checkOrgName ? changeList.checkOrgName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="是否及时变更">
              {{ changeList.isJs == '1' ? '是' : changeList.isJs == '0' ? '否' : '--' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="technological">
        <p class="titBox">流程记录</p>
        <div class="block">
          <!--  v-if="show" activities-->
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              type="primary"
              size="large"
              :timestamp="activity.performerTime"
              placement="top"
              :reverse="true"
              color="#007AF5 "
            >
              <el-card class="box-card">
                <div class="text">
                  <span>任务名称</span>
                  <span class="item">{{ activity.taskName }}</span>
                </div>
                <div class="text">
                  <span>操作名称</span>
                  <span class="item">{{ activity.performName }}</span>
                </div>
                <div class="text">
                  <span>处理意见</span>
                  <span class="item">
                    {{ activity.performDesc }}
                  </span>
                </div>
                <div class="text">
                  <span>处理人</span>
                  <span class="item">{{ activity.performerName }}</span>
                </div>
                <div class="text">
                  <span>值班电话</span>
                  <span class="item">{{ activity.performerTel }}</span>
                </div>
                <div class="text">
                  <span>下一步名称</span>
                  <span class="item">{{ activity.nextTaskName }}</span>
                </div>
                <div class="text">
                  <span>下一步操作</span>
                  <span class="item">{{ activity.nextPerformerDesc }}</span>
                </div>
                <div class="text">
                  <span>操作时间</span>
                  <span class="item">{{ activity.performerTime }}</span>
                </div>
              </el-card>

              <!-- <el-card class="box-card">
                                <div v-for="o in 8" :key="o" class="text item">
                                    {{ "列表内容 " + o }}
                                </div>
                            </el-card> -->
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-empty description="暂无流程" v-if="!show"></el-empty>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted, reactive } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { pubflowlist, getCmbizView2, selectCmBizById2 } from '@/http/api/resources';
  import { useStore } from 'vuex';
  import TinymceEditor from '@/components/TinymceEditor.vue';
  const store = useStore();
  const route = useRoute();
  const router = useRouter();
  const activities = reactive([]);
  const changeCode = ref(route.params.value);
  const historyName = ref(router.options.history.state.back.split('/')[1]);
  const changeList = ref({
    changeCauseText: '',
    changeDetails: '',
    changeProgram: ''
  });
  const type = ref(route.params.type);
  const show = ref(true);
  const fmId = ref(route.params.fmId);
  const pageNum = ref('1');
  const pageSize = ref('20');
  const total = ref('');
  const startTime = ref(route.params.startTime ? route.params.startTime : store.state.startTime);
  const endTime = ref(route.params.endTime ? route.params.endTime : store.state.endTime);
  // const desc = ref('你好');
  onMounted(() => {
    if (changeCode.value == 'resources') {
      getCmbizView_list();
      pubflow_list();
    } else {
      selectCmBizById_list();
      // getCmbizView_list();
      pubflow_list();
    }
  });
  const getCmbizView_list = () => {
    getCmbizView2({
      startTime: startTime.value,
      endTime: endTime.value,
      flag: type.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      changeCode: changeCode.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.value = res.data.rows[0];
      // this.changeList = res.data.rows[0];
    });
  };
  const pubflow_list = () => {
    pubflowlist({
      pageSize: pageSize.value,
      pageNum: pageNum.value,
      bizId: fmId.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      activities.length = 0;
      (activities as any).push(...res.data.data.rows);
      total.value = res.data.data.total;
      if (!total.value) {
        show.value = false;
      }
    });
  };
  const selectCmBizById_list = () => {
    // changeList.value={
    //   changeCauseText:'1111',
    //   changeCode:'ss'
    // }
    selectCmBizById2({
      changeId: fmId.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.value = res.data.data;
    });
  };
  // const onEditorFocus = (event) => {
  //   event.enable(false);
  // }; // 获得焦点事件
  const goBack = () => {
    //  router.go(-1);
    router.push({
      name: historyName.value,
      params: {
        type: type.value
      }
    });
  };
  // const test = computed({
  //   get() {
  //     return (Math.random() * 1000).toFixed(0);
  //   },
  //   set(val) {
  //     changeList.value.changeCauseText = val;
  //   }
  // });
</script>
<style lang="less" scoped>
  .resources_detail {
    width: 100%;
    min-height: 100vh;
    // background: rgb(84, 84, 95);
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      height: 34px;
      margin-bottom: 12px;
      .tip {
        line-height: 34px;
        font-size: 14px;
        font-weight: 400;
        color: #46545d;
      }
      .btn {
        width: 80px;
        height: 34px;
        background: #007af5;
        border-radius: 2px;
        color: #fff;
        font-size: 12px;
        border: 0;
        cursor: pointer;
      }
    }
    .details {
      display: flex;
      justify-content: space-between;
      .information {
        width: 60%;
        // margin: auto;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }

        .essential {
          // margin-bottom: 40px;
          padding: 20px;
          background: #fff;
          border-radius: 6px;
          .faultDecriptSummary {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #46545d;
            margin-bottom: 20px;
          }
          .el-descriptions {
            :deep(.is-bordered) {
              //border-collapse: separate;
              tbody {
                margin-bottom: 3px;

                .el-descriptions-row {
                  // :deep(.el-descriptions-item__label:not(.is-bordered-label)) {
                  // }
                  .el-descriptions-item__cell {
                    &.el-descriptions-item__label {
                      background: #fafafa !important;
                      padding: 10px 10px 0;
                      border: 3px solid #fafafa;
                      border-bottom: none;
                      border-right: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #929ea8;
                    }
                    &.el-descriptions-item__content {
                      background: #fafafa !important;
                      padding: 5px 10px;
                      border-left: 3px solid #fafafa;
                      border-top: none;
                      border-right: 3px solid #fff;
                      border-bottom: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #46545d;
                      :deep(.tinymce-box) {
                        width: 100%;
                        :deep(.tox) {
                          :deep(.tox-editor-container) {
                            :deep(.tox-editor-header) {
                              :deep(.tox-promotion) {
                                display: none;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                  :deep(.el-descriptions-item__label) {
                    //margin-right: 3px;
                    background: #fafafa !important;
                    padding: 10px 10px 0;
                  }
                }
              }
            }
          }
        }
      }
      .technological {
        width: 35%;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }
        .el-divider {
          .el-divider__text {
            font-size: 16px;
            line-height: 35px;
          }
        }
        .block {
          .el-timeline {
            width: 80%;
            margin: 0 auto;
            .el-timeline-item__tail {
              //width: 1px;

              border: 1px solid #007af5;
            }
            :deep(.el-timeline-item__timestamp) {
              font-size: 14px;
              font-weight: 400;
              color: #46545d;
            }
            :deep(.el-timeline-item__content) {
              color: #fff;
              .box-card {
                border-radius: 10px;
                .el-card__body {
                  .text {
                    min-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    font-weight: 400;
                    color: #929ea8;
                    .item {
                      color: #46545d;
                      max-width: 70%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
